<template>
  <div class="recommend">
    <div class="rec-item" v-for="(item, index) in recommend" :key="index">
      <a :href="item.link">
        <img :src="item.image" />
        <div class="title">{{ item.title }}</div>
      </a>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      recommend: {
        type: Array
      }
    }
  }
</script>

<style scoped>
  .recommend {
    display: flex;
    justify-content: space-around;
    text-align: center;
    padding: 10px 0 15px;
    border-bottom: 8px solid #eee;
  }
  a {
    display: block;
  }
  .rec-item img {
    width: 2.1875rem;
  }
  .title {
    font-size: 12px;
    color: #726f6f;
  }
</style>
